<template lang="pug">
.main-box
  .top
    .lefts
      svg(@click="onNav" data-v-6fe82028="" t="1492500959545" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" class="hamburger is-active")
        path(data-v-6fe82028="" d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692")
        path(data-v-6fe82028="" d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693")
        path(data-v-6fe82028="" d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694")
      el-breadcrumb
        el-breadcrumb-item(v-for='d in links' ::key="d.path" :to="d.path") {{d.name}}
    .rights
      el-button(type="primary" @click="click") 全屏

      img(class='img' :src='$store.state.item.avatar')
      el-dropdown(@command="handleCommand")
        span.el-dropdown-link
          | {{$store.state.item.username}}
          i(class="el-icon-arrow-down el-icon--right")
        el-dropdown-menu(slot="dropdown" style="width:100px")
            el-dropdown-item(command="onPassword") 修改密码
            el-dropdown-item(command="onLogin")  退出登录
  .box
    .list
        el-tag(v-for="d in navList " :key="d.path" @click="view(d.path)" closable @close.stop="del(d.path)") {{d.name}}
  on-password(v-model="show")
  router-view

</template>
<script>
import screenfull from "screenfull";
import onPassword from '@/components/onPassword.vue'
export default {
  props:['value'],
  data() {
    return {
      arr:[],
      isFullscreen: false,
      list:[],
      show:false,

      navList:[]
    }
  },
  components: {
    onPassword
  },
  created() {
    this.axios.get('/who').then(({data}) => {
      console.log(data);
      this.$store.commit('setList',data.data)
    });

    this.setNavList(this.$route);
  },
  watch: {
    $route(r) {
      this.setNavList(r);
    }
  },
  computed: {
    links() {
      const arr = [{
        name:"首页",
        to:'/main'
      }];
      const { $route : r } = this;
      if(r.name === '首页') {
        return [{
          name:"首页"
        }]
      }
      if(r.meta && r.meta.parent) {
        arr.push({
          name: r.meta.parent
        })
      }
      arr.push({
        name:r.name
      });
      return arr
    },
  },
  methods: {
    view(path) {
      if(this.$route.path === path) {
        return;
      }
      this.$router.push(path)
    },
    del(path) {
      const index = this.navList.findIndex(i => i.path === path)
      if(this.$route.path === path) {
        const route = this.navList[index + 1] || this.navList[index-1]
        this.$router.push(route.path)
      }else {
        this.navList.splice(index,1);
      }
    },
    setNavList({ path, name }) {
      if(!this.navList.find(i => i.path === path)) {
        this.navList.push({
          path, name
        })
      }
    },

    onNav() {
      this.$emit('input',!this.value)
    },
    // 全屏
    click() {
      if(!screenfull.isEnabled) {
        this.$message({
          message:'不支持全屏',
          type:'warning'
        });
        return false;
      }
      screenfull.toggle();
      this.$message({
        message: '全屏啦',
        type: 'success'
      })
    },
    handleCommand(command) {
      this[command]();
    },
    // 退出登录
    onLogin() {
      this.axios.post('/logout').then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.$router.push('/login')
        }
      })
    },
    // 修改密码
    onPassword() {
      this.show = true
    }
  },
}
</script>
<style lang="sass">
.main-box
  width: 100%
  .top
    width: 100%
    display: flex
    height: 50px
    line-height: 50px
    align-items: center
    border-bottom: 1px solid #d8dce5
    justify-content: space-between
    .lefts
      display: flex
      align-items: center
      svg
        width: 22px
        height: 22px
        margin: 0 10px
      .el-breadcrumb
        font-weight: normal
    .rights
      display: flex
      align-items: center
      .img
        width: 30px
        height: 30px
  .box
    height: 50px
    .list
      .router-link
        width: 15px
        height: 15px
        border: 1px solid #000000
</style>
